<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg基本概念</title>
  </head>
  <body>
    <header>
      <h1>svg基本概念</h1>
    </header>
    <main>
      <section>
        <h2>SVG在html中的使用方式</h2>
        <ul>
          <li>内容</li>
          <li>图片</li>
          <li>元素</li>
        </ul>
        <h3>作为内容</h3>
        <!-- <iframe
          src="./svg/310330.svg"
          frameborder="0"
          width="200px"
          highth="200px"
        ></iframe> -->
        <iframe
          src="https://svgsilh.com/svg/310330.svg"
          frameborder="0"
          width="200px"
          height="200px"
          ><rect x="10" y="5" width="20" height="20" fill="#567890"
        /></iframe>
        <embed
          src="./svg/310330.svg"
          style="display: block; width: 300px; height: 300px;"
        />
        <h3>作为图片</h3>
        <img
          src="./svg/310330.svg"
          alt="svg"
          style="width: 400px; height: 400px;"
        />
        <h3>作为元素</h3>
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          style="background-color: chartreuse;"
        >
          <rect width="200" height="200" fill="#ccc" />
        </svg>
      </section>
      <section>
        <h2>svg重要概念</h2>
        <svg
          width="200"
          height="200"
          viewBox="0 0 50 50"
          style="background-color: chocolate;"
        >
          <rect x="10" y="5" width="20" height="20" fill="#567890" />
        </svg>

        <h3>形状</h3>
        <svg
          width="200"
          height="200"
          viewBox="0 0 50 50"
          style="background-color: chocolate;"
        >
          <rect x="10" y="5" width="20" height="20" fill="#567890" />
          <circle cx="100" cy="100" r="100" style="fill: red; stroke: aqua;" />
        </svg>
      </section>
    </main>
    <footer></footer>
  </body>
</html>
